<template>
  <div class="option">
    <div class="btn2" @click="operate2(unfold2)">中级</div>
    <div
      :class="[
        'options2',
        this.unfold2 && this.unfold2 === '1' ? 'unfold2' : '',
      ]"
    >
      <button class="button" @click="Select">点击展开</button>
      <div class="selectbox">
        <div class="select" v-if="show">
          <div class="left">人力资源</div>
          <div class="right">
            <ul>
              <li class="box1">
                <el-menu
                  :default-active="activeIndex"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                >
                  <el-submenu index="1">
                    <template slot="title">普通工种</template>
                    <el-menu-item index="1-1">手工木工</el-menu-item>
                    <el-menu-item index="1-2">精细木工</el-menu-item>
                    <el-menu-item index="1-3">钢筋工</el-menu-item>
                    <el-menu-item index="1-4">抹灰工</el-menu-item>
                    <el-menu-item index="1-5">钢筋工</el-menu-item>
                    <el-menu-item index="1-6">油漆工</el-menu-item>
                    <el-menu-item index="1-7">混凝土工</el-menu-item>
                    <el-menu-item index="1-8">砌筑工</el-menu-item>
                    <el-menu-item index="1-9">防水工</el-menu-item>
                    <el-menu-item index="1-10">电焊工</el-menu-item>
                    <el-menu-item index="1-11">管工</el-menu-item>
                    <el-menu-item index="1-12">模板工</el-menu-item>
                    <el-menu-item index="1-13">安装钳工</el-menu-item>
                    <el-menu-item index="1-14">安装起重工 </el-menu-item>
                    <el-menu-item index="1-15">通风工</el-menu-item>
                    <el-menu-item index="1-16">机泵运行工</el-menu-item>
                    <el-menu-item index="1-17">供水设备维修钳工</el-menu-item>
                    <el-menu-item index="1-18">供水设备电工</el-menu-item>
                    <el-menu-item index="1-19">供水仪表工</el-menu-item>
                    <el-menu-item index="1-20">供水管道工</el-menu-item>
                    <el-menu-item index="1-21">变配电运行工</el-menu-item>
                    <el-menu-item index="1-22">筑路工</el-menu-item>
                    <el-menu-item index="1-23">下水道工</el-menu-item>
                    <el-menu-item index="1-24">泵站操作工</el-menu-item>
                    <el-menu-item index="1-25">沥青工</el-menu-item>
                    <el-menu-item index="1-26"
                      >沥青混凝土摊铺机操作工</el-menu-item
                    >
                    <el-menu-item index="1-27">绿化工</el-menu-item>
                    <el-menu-item index="1-28">假山工</el-menu-item>
                    <el-menu-item index="1-29">水景工</el-menu-item>
                    <el-menu-item index="1-30">力工</el-menu-item>
                    <el-menu-item index="1-31">其它</el-menu-item>
                  </el-submenu>
                  <el-submenu index="2">
                    <template slot="title">特殊工种</template>
                    <el-menu-item index="2-1">电工</el-menu-item>
                    <el-menu-item index="2-2">弱电工</el-menu-item>
                    <el-menu-item index="2-3">架子工</el-menu-item>
                    <el-menu-item index="2-4">脚手架升降工</el-menu-item>
                    <el-menu-item index="2-5">起重机驾驶员</el-menu-item>
                    <el-menu-item index="2-6">挖掘机驾驶员</el-menu-item>
                    <el-menu-item index="2-7">塔式起重机驾驶员</el-menu-item>
                    <el-menu-item index="2-8">推土机驾驶员</el-menu-item>
                    <el-menu-item index="2-9">筑炉工</el-menu-item>
                    <el-menu-item index="2-10">桩工</el-menu-item>
                    <el-menu-item index="2-11"
                      >中小型建筑机械操作工</el-menu-item
                    >
                    <el-menu-item index="2-12">建筑起重司索信号工</el-menu-item>
                    <el-menu-item index="2-13">施工升降机司机</el-menu-item>
                    <el-menu-item index="2-14">物料提升机司机</el-menu-item>
                    <el-menu-item index="2-15">挖掘机械操作工</el-menu-item>
                    <el-menu-item index="2-16"
                      >建筑塔式起重机操作工</el-menu-item
                    >
                    <el-menu-item index="2-17">
                      铲土运输机械操作工</el-menu-item
                    >
                    <el-menu-item index="2-18">桩工机械操作工</el-menu-item>
                    <el-menu-item index="2-19">压路机械操作工</el-menu-item>
                    <el-menu-item index="2-20"> 路面机械操作工</el-menu-item>
                    <el-menu-item index="2-21"> 砼机械操作工</el-menu-item>
                    <el-menu-item index="2-22">高空作业机械操作工</el-menu-item>
                    <el-menu-item index="2-23">电梯安装维修工</el-menu-item>
                    <el-menu-item index="2-24"
                      >钢筋预应力机械操作工
                    </el-menu-item>
                    <el-menu-item index="2-25"
                      >机械式停车设备操作工</el-menu-item
                    >
                    <el-menu-item index="2-26"
                      >机械式停车设备操作工</el-menu-item
                    >
                    <el-menu-item index="2-27">高空建筑清洁工</el-menu-item>
                    <el-menu-item index="2-28">爆破工</el-menu-item>
                    <el-menu-item index="2-29">其它</el-menu-item>
                  </el-submenu>
                </el-menu>
              </li>
              <li class="box2"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.header {
  .option {
    .options1 {
      transition: all 0.5s;
      display: none;
      margin-left: 20px;
      .option1 {
        display: flex;
        .title {
        }
        .text {
        }
      }
    }
    .btn1 {
      color: #000;
      cursor: pointer;
      font-weight: bold;
      user-select: none;
      font-size: 20px;
    }
    .unfold1 {
      display: block;
    }
    .btn2 {
      font-weight: bold;
      user-select: none;
      font-size: 20px;
    }
    .btn3 {
      font-weight: bold;
      user-select: none;
    }
    .options2 {
      transition: all 0.5s;
      display: none;
      margin-left: 20px;
      .button {
      }
      .selectbox {
        width: 100%;
        height: 120px;
        .select {
          display: flex;
          position: relative;
          .left {
            font-weight: bold;
            padding-right: 10px;
            margin-left: 20px;
          }
          .right {
            ul {
              display: flex;
              position: relative;
              .box1 {
                position: absolute;
                left: -8px;
                top: -19px;
                li {
                  font-size: 14px;
                  padding-left: 10px;
                  padding-right: 7px;

                  .el-menu-demo {
                    .t1 {
                      .title {
                      }
                    }
                  }
                  .title {
                  }
                }
              }
              .box2 {
                position: absolute;
                left: 85px;
                top: -19px;
              }
              .box3 {
                position: absolute;
                left: 169px;
                top: -19px;
              }
              .box4 {
                position: absolute;
                left: 254px;
                top: -19px;
              }
              .box5 {
                position: absolute;
                left: 339px;
                top: -19px;
              }
              .box6 {
                position: absolute;
                left: 423px;
                top: -19px;
              }
              .box7 {
                position: absolute;
                left: 506px;
                top: -19px;
              }
              .box8 {
                position: absolute;
                left: 587px;
                top: -19px;
              }
              .box9 {
                position: absolute;
                left: 671px;
                top: -19px;
              }
              .box10 {
                position: absolute;
                left: 756px;
                top: -19px;
              }
              .box11 {
                position: absolute;
                left: 841px;
                top: -19px;
              }
              .box12 {
                position: absolute;
                left: 927px;
                top: -19px;
              }
              .box13 {
                position: absolute;
                left: 1008px;
                top: -19px;
              }
              .box14 {
                position: absolute;
                left: 1088px;
                top: -19px;
              }
              .box15 {
                position: absolute;
                left: 1165px;
                top: -19px;
              }
              .box16 {
                position: absolute;
                left: 1248px;
                top: -19px;
              }
              .box17 {
                position: absolute;
                left: -11px;
                top: 47px;
              }
            }
          }
          .son1 {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 106px;
            top: 22px;
            li {
              width: 83px;
              height: 30px;
              line-height: 30px;
              background-color: grey;
              text-align: center;
            }
          }
          .son2 {
            position: absolute;
            left: 184px;
            top: 20px;
          }
        }
      }
    }
    .unfold2 {
      display: block;
    }
    .options3 {
      transition: all 0.5s;
      display: none;
      margin-left: 20px;
      .option3 {
        display: flex;
        .title4 {
          font-weight: bold;
          user-select: none;
        }
        .btn4 {
          margin-left: 20px;
          color: #000;
          cursor: pointer;
          user-select: none;
        }
        .options4 {
          display: flex;
        }
        .unfold4 {
          display: block;
        }
      }
    }
    .btn3 {
      color: #000;
      cursor: pointer;
      font-weight: bold;
      user-select: none;
      font-size: 20px;
    }
    .unfold3 {
      display: block;
    }
  }
}
</style>


<script>
import Selectchild from "./Selectchild.vue";
export default {
  name: "Intermediate2",
  components: { Selectchild },
  data() {
    return {
      unfold2: "0",
      show: false,
      activeIndex: "1",
    };
  },
  methods: {
    operate2(value2) {
      console.log(value2);
      if (value2 == "1") {
        this.unfold2 = "0";
      } else {
        this.unfold2 = "1";
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    Select() {
      if (this.show == false) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
  },
};
</script>